<template>
  <div>
    <ButtonGroup :title="editorTitle" :currentStatus="color">
      <el-color-picker v-model="color" @update:modelValue="inputHandle" />
    </ButtonGroup>
  </div>
</template>

<script setup lang="ts">
import type { Component } from "vue";
import ButtonGroup from "@/components/SurveyComs/EditItems/Common/BuutonGroup.vue";
import type { IUpdateStatus } from "@/types/common";

const props = defineProps<{
  id: string;
  status: string;
  isShow: boolean;
  name: string;
  statusKey: string;
  editCom: Component;
  editorTitle: string;
}>();

const updateStatus = inject("updateStatus") as IUpdateStatus;

// ^ 标题内容
const color = ref(props.status);

// * 输入处理
const inputHandle = (value: string | null): void => {
  updateStatus(props.statusKey, value || "");
};
</script>

<style scoped></style>
